<template>
	<view>
		<u-tabs :list="tabBars" line-width="60" :scrollable="false" :current="tabIndex" @change="tapTab"></u-tabs>
		<view class="content">
			<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">
				<template v-for="(tab, index) in tabBars">
					<swiper-item :key="index">
						<mescroll-item ref="mescrollItem" :i="index" :index="tabIndex" :params="params"></mescroll-item>
					</swiper-item>
				</template>
			</swiper>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./components/index-content.vue"
	
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [
					{ name: this.$t('defect.other.pending') },
					{ name: this.$t('defect.other.created') },
					{ name: this.$t('baseCommon.other.whole') }
				],
				params: {}
			}
		},
		onLoad(params) {
			this.params = params
			
			// 业务操作日志
			this.$saveOpLog('query', 'df_mgt', '')
		},
		methods: {
			tapTab(e) {
				this.tabIndex = e.index
			},
			changeTab(e) {
				this.tabIndex = e.target.current 
				this.params = {}
			},
			reload(index){
				this.$refs.mescrollItem[index].reload()
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0) {
				let that = this
				uni.navigateTo({
					url: "/pages/business/defect/query",
					events: {
						eventData(data) {
							that.params = data
							that.params.type = "query"
							that.$refs.mescrollItem[that.tabIndex].reload()
						}
					}
				})
			} else if(e.index == 1) {
				uni.navigateTo({
					url: "/pages/business/defect/detail?type=add"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1F1F1;
	}
	
	.swiper-box {
		padding-top: 8px;
		/* #ifdef H5 */
		height: calc(100vh - 88px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 44px);
		/* #endif */
	}
</style>
